<template>
<!-- +"echatrsData.ecId" -->
    <div class="tiger-trend-charts" :id="'echartsId'+echatrsData.id" ref="echartsId">
        
    </div>
    
</template>
<script>
// {name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}
export default {
    name: 'echarts',
    props:{
        echatrsData: {
            type: Object
        },
        echartsProp:{
            type:String
        }
    },
    data(){
        return {
            pillarData:{
                color: ['#3398DB'],
                grid:{
                    x:0,
                    x2:0,
                    y:0,
                    y2:0
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                   
                ]
            },
            lineData:{
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                grid:{
                    x:0,
                    x2:0,
                    y:0,
                    y2:0
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    
                ]
            },
            pillarLine:{
                tooltip: {
                    trigger: 'axis',
                   
                },
                grid:{
                    x:0,
                    x2:0,
                    y:0,
                    y2:0
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                    
                    },
                    {
                        type: 'value',
                        name: '',
                        
                    }
                ],
                series: [
                    
                ]
            }
        }
    },
    methods:{
        initEchart(){
            let seriesData=null;
            switch(this.echatrsData[this.echartsProp].seriesType){
                case "pillar":
                    this.pillarData.series=this.echatrsData[this.echartsProp].seriesData;
                    seriesData=this.pillarData;
                    break
                case "line":
                    this.lineData.series=this.echatrsData[this.echartsProp].seriesData;
                    seriesData=this.lineData;
                    break
                case "pillarLine":
                    this.pillarLine.series=this.echatrsData[this.echartsProp].seriesData;
                    seriesData=this.pillarLine;
                    break
                    
            }
            this.$nextTick(() => {
                    let myChart = this.$echarts.init(this.$refs.echartsId);
                    myChart.setOption(seriesData);
                    myChart.resize();
                });
        }
    },
    mounted(){
        this.initEchart();
    }
}
</script>
<style scoped>
    .tiger-trend-charts{
        width:100px;
        height:30px;
    }
</style>